.q-tag {
  padding: $box-mn;
  @extend .font-sm;
  @extend .bd-radius;
  @extend .mr-sm;
  @extend .row-col-center;
  //深色主题，字体白色，其他主题色
  color: $color-main;
  background: mix($color-white, $color-main, 90%);
  border-color: mix($color-white, $color-main, 60%);
}

@each $key, $color in $colors-base {
  .q-tag-#{''+$key+''} {
    padding: $box-mn;
    @extend .font-sm;
    @extend .bd-radius;
    @extend .mr-sm;
    @extend .row-col-center;
    color: $color;
    background: mix($color-white, $color, 90%);
    //border: 1px solid mix($color-white, $color, 60%);
  }

  .q-tag-#{''+$key+''}-bd {
    padding: $box-mn;
    @extend .font-sm;
    @extend .bd-radius;
    @extend .mr-sm;
    @extend .row-col-center;
    color: $color;
    background: mix($color-white, $color, 90%);
    border: 1px solid mix($color-white, $color, 60%);
  }

  .q-tag-#{''+$key+''}-round {
    padding: $box-mn;
    @extend .font-sm;
    @extend .bd-round;
    @extend .mr-sm;
    @extend .row-col-center;
    color: $color;
    background: mix($color-white, $color, 90%);
    border: 1px solid mix($color-white, $color, 60%);
  }
}

.q-tag-white {
  padding: $box-mn;
  @extend .font-sm;
  @extend .bd-radius;
  @extend .mr-sm;
  @extend .row-col-center;
  color: $color-main;
  background: $color-white;
  border: $border-base;
}
